<template>
  <div>
    <el-button-group>
      <el-button
        type="primary"
        icon="el-icon-minus"
        @click="delCategory"
      ></el-button>
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="addCategory"
      ></el-button>
      <el-button
        type="primary"
        icon="el-icon-edit"
        @click="editCategory"
      ></el-button>
    </el-button-group>
    <el-tree
      ref="tree"
      node-key="id"
      empty-text="暂无数据"
      draggable
      highlight-current
      :expand-on-click-node="false"
      @node-click="handleNodeClick"
      :data="data"
      :props="{ label: 'name' }"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span v-if="!data.isInput">{{ node.label }}{{ node.data.label }}</span>
        <span v-else
          ><el-input
            v-model="currentInput"
            placeholder="请输入分类名称"
            @blur="saveCurrentInp"
          ></el-input
        ></span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filterText: "",
      data: [
        {
          id: 0,
          label: "中国",
          isInput: false,
        },
      ],
      children: [
        {
          id: 1,
          label: "北京",
          isInput: false,
          children: [
            {
              id: 11,
              label: "通州",
              isInput: false,
            },
          ],
        },
        {
          id: 2,
          label: "上海",
          leaf: true,
          isInput: false,
        },
        {
          id: 3,
          label: "山西",
          isInput: false,
          children: [
            {
              id: 13,
              label: "太原",
              isInput: false,
            },
            {
              id: 14,
              label: "阳泉",
              isInput: false,
            },
          ],
        },
        {
          id: 4,
          label: "黑龙江",
          isInput: false,
          children: [
            {
              id: 12,
              label: "哈尔滨",
              isInput: false,
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
        isLeaf: "leaf",
      },
    };
  },
  methods: {
    // 保存当前点击的分类
    handleNodeClick(data, node) {
      this.currentData = data; // 当前分类的数据
      this.currentNode = node; // 当前分类的节点
      if (data.id != -1) {
        this.tmpCurrent = data; // 缓存当前分类数据，主要用于新增时防止再次点击输入框当前值变化
      }
    },
    // 添加分类
    addCategory() {
      const newChild = { id: -1, label: "", leaf: true, isInput: true };
      if (!this.currentData.children) {
        this.$set(this.currentData, "children", []);
      }
      this.currentData.children.push(newChild);
    },
    // 编辑分类
    editCategory() {
      if (this.currentData.id) {
        this.currentInput = this.currentData.name;
        this.$set(this.currentData, "isInput", true);
        this.$set(this.currentData, "isEdit", true);
      } else {
        this.$message("请选择分类");
      }
    },
    // 保存分类新增或者修改
    saveCurrentInp() {
      if (this.currentInput) {
        var params = {
          name: this.currentInput,
        };
        if (this.tmpCurrent.isEdit) {
          params.id = this.tmpCurrent.id;
        } else {
          params.parentId = this.tmpCurrent.id;
        }
        // 调用接口新增分类，成功后会返回分类信息，这样就可以更新新增的分类数据了，这里记得添加上保存的接口才可以哦
        var newChild = {
          id: res.result.id,
          label: res.result.name,
          children: [],
          isInput: false,
        };
        this.$set(this.currentNode, "data", newChild);
        this.$refs.tree.updateKeyChildren(
          this.currentData.isEdit ? this.tmpCurrent.id : -1,
          newChild
        );
      } else {
        this.$message.error("请输入分类名称");
      }
    },
    // 删除分类
    delCategory() {
      this.$confirm(
        "请确认是否要删除" + this.currentData.name + "分类！",
        "系统提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          // 调用接口删除分类，删除成功后执行下面操作，更新数据即可
          const parent = this.currentNode.parent;
          const children = parent.data.children || parent.data;
          const index = children.findIndex((d) => d.id === this.currentData.id);
          children.splice(index, 1);
        })
        .catch(() => {});
    },
  },
};
</script>

<style>
</style>